const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = env => {
    if (!env) {
        env = {}
    }
    let plugins = [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            template: './app/views/index.html',
            filename: "index.html",
            minify: {
                removeAttributeQuotes: true,//删除双引号
                collapseWhitespace: false,//折叠空行
            },
            hash: true,
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ];
    if (env.production) {
        plugins.push(
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: '"production"'
                }
            }),
            new ExtractTextPlugin("style.css", {ignoreOrder: true})
        )
    }
    return {
        entry: {
            app: './app/js/main.js'
        },
        devServer: {
            contentBase: './dist',
            hot: true,
            compress: true,
            port: 996,
            clientLogLevel: "none",
            quiet: true,
            historyApiFallback:{
                index:'/index.html'
            },
        },
        module: {
            loaders: [
                {
                    test: /\.html$/,
                    loader: 'html-loader'
                }, {
                    test: /\.vue$/,
                    loader: 'vue-loader',
                    options: {
                        cssModules: {
                            localIdentName: '[path][name]_[local]_[hash:base64:6]',
                            camelCase: true
                        },
                        extractCSS: true,
                        loaders: env.production ? {
                            mcss: ExtractTextPlugin.extract({
                                use: 'css-loader',
                                fallback: 'vue-style-loader'
                            }),
                            css: ExtractTextPlugin.extract({
                                use: 'css-loader!px2rem-loader?remUnit=40&remPrecision=8',
                                fallback: 'vue-style-loader'
                            }),
                            scss: ExtractTextPlugin.extract({
                                use: 'css-loader!px2rem-loader?remUnit=40&remPrecision=8!sass-loader',
                                fallback: 'vue-style-loader'
                            })
                        } : {
                            mcss: 'vue-style-loader!css-loader',
                            css: 'vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8',
                            scss: 'vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8!sass-loader'
                        }
                    }
                }, {
                    test: /\.scss$/,
                    loader: 'style-loader!css-loader!sass-loader'
                }
            ]
        },
        resolve: {
            extensions: [
                '.js', '.vue', '.json'
            ],
            alias: {
                'vue$': 'vue/dist/vue.esm.js'
            }
        },
        plugins,
        output: {
            filename: '[name].min.js',
            path: path.resolve(__dirname, 'dist')
        }
    }
};
